<template>
  <div>
    <supertable
      class="PhysicalTable"
      :tableData="tableData"
      :headerData="headerData"
      :isoperation="false"
      :height="1000"
      :total="total"
      :limit="limit"
      @IDchange="IDchangeFn"
      @CurrentChange="CurrentChange"
      @SizeChange="SizeChange"
      @Delete="DeleteFn"
    >
      <template v-slot:btnSolt>
        <div class="btnSolt">
          <el-button
            type="success"
            icon="el-icon-plus"
            size="mini"
            @click="add()"
            >添加</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="modification()"
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteFn()"
            >删除</el-button
          >
        </div>
      </template>
      <!-- 是否上架 -->
      <template v-slot:isDisable="row">
        <div>
          <div @click="changeisDisableFn(row.row)">
            <el-switch v-model="row.row.isDisable" active-color="#13ce66">
            </el-switch>
          </div>
        </div>
      </template>
    </supertable>
    <!-- 添加 -->
    <div>
      <el-dialog
        title="添加物流公司"
        :visible.sync="dialogVisible"
        width="65%"
        :before-close="handleClose"
        v-DragWindow
      >
        <el-row>
          <el-col :span="12">
            <el-form
              ref="form"
              :model="form"
              label-width="120px"
              :rules="rules"
            >
              <el-form-item label="公司名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="是否禁用">
                <el-radio v-model="form.radio" label="false">否</el-radio>
                <el-radio v-model="form.radio" label="true">是</el-radio>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form
              ref="form"
              :model="form"
              label-width="120px"
              :rules="rules"
            >
              <el-form-item label="公司编码" prop="code">
                <el-input v-model="form.code"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input-number
                  v-model="num"
                  @change="handleChange"
                  :min="0"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">提 交</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 修改 -->
    <div>
      <el-dialog
        title="添加物流公司"
        :visible.sync="Visible"
        width="65%"
        :before-close="handleClose"
        v-DragWindow
      >
        <el-row>
          <el-col :span="12">
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="活动名称">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="是否禁用">
                <el-radio v-model="radio" label="false">否</el-radio>
                <el-radio v-model="radio" label="true">是</el-radio>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form ref="form" :model="form" label-width="120px">
              <el-form-item label="公司编码">
                <el-input v-model="form.code"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                <el-input-number
                  v-model="num"
                  @change="handleChange"
                  :min="0"
                  label="描述文字"
                ></el-input-number>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="modificationsubmit()"
            >提 交</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 删除 -->
    <div></div>
  </div>
</template>

<script>
import {
  sysexpresslist,
  sysexpress,
  changeDisabled,
  sysexpressDelete,
} from "@/api/PhysicalDistributionManagement";
import supertable from "@/components/supertable";
export default {
  name: "PhysicalDistributionManagement",
  data() {
    return {
      radio: "",
      val: "",
      dataindex: "",
      num: "",
      dialogVisible: false,
      Visible: false,
      total: null,
      page: 1,
      limit: 20,
      form: {
        radio: "",
        name: "",
        code: "",
        sort: "",
      },
      rules: {
        code: { required: true, trigger: "blur", message: "请输入公司编码" },
        name: { required: true, trigger: "blur", message: "请输入公司名称" },
      },
      headerData: [
        {
          prop: "name",
          label: "公司名称",
          width: "",
        },
        {
          prop: "code",
          label: "公司编码",
          width: "",
        },
        {
          prop: "isDisable",
          label: "是否禁用",
          width: "",
          slot: true,
        },
        {
          prop: "sort",
          label: "排序",
          width: "",
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    let _self = this;
    _self.sysexpresslistFn();
  },
  methods: {
    //分页
    SizeChange(val) {
      let _self = this;
      console.log(val);
      _self.limit = val;
      _self.sysexpresslistFn();
    },

    CurrentChange(val) {
      let _self = this;
      console.log(val);
      _self.page = val;
      _self.sysexpresslistFn();
    },

    //删除
    DeleteFn(val) {
      let _self = this;
      // console.log(val);
      _self.val = val[0];
    },
    //删除
    deleteFn() {
      let _self = this;
      let data = {
        id: _self.val.id,
      };
      _self
        .$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          sysexpressDelete(data).then((res) => {
            console.log(res);
            if (res.code == 20000) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
            _self.tableData = [];
            _self.sysexpresslistFn();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //switch 开关
    changeisDisableFn(row) {
      let _self = this;
      // console.log(row);
      let data = {
        id: row.id,
        disabled: row.isDisable,
      };
      changeDisabled(data).then((res) => {
        // console.log(res.data);
        if ((res.code = 20000)) {
          this.$message({
            message: data.disabled ? "上架成功" : "下架成功",
            type: "success",
          });
        }
      });
    },
    //行数据传值
    IDchangeFn(val) {
      let _self = this;
      console.log(val);
      _self.val = val;
    },
    //修改
    modification() {
      let _self = this;
      _self.Visible = true;
      _self.dataindex = "";
      _self.form.name = _self.val.name;
      _self.form.code = _self.val.code;
      _self.radio = JSON.stringify(_self.val.isDisable);
      _self.form.sort = _self.val.sort;
      _self.num = _self.val.sort;
      _self.dataindex = _self.val.id;
    },

    //修改提交
    modificationsubmit() {
      let _self = this;
      _self.tableData = [];

      let data = {
        name: _self.form.name,
        code: _self.form.code,
        disabled: _self.radio,
        sort: _self.form.sort,
        id: _self.dataindex,
      };
      sysexpress(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          _self.sysexpresslistFn();
        }
      });
      _self.Visible = false;
    },
    //排序
    handleChange(value) {
      let _self = this;
      _self.form.sort = value;
    },
    //添加
    add() {
      let _self = this;
      _self.dialogVisible = true;
      _self.dataindex = "";
      _self.form.name = "";
      _self.form.code = "";
      _self.radio = "";
      _self.form.sort = "";
      _self.num = "";
    },
    //添加提交
    submit(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let _self = this;
          _self.tableData = [];
          let data = {
            name: _self.form.name,
            code: _self.form.code,
            disabled: _self.radio,
            sort: _self.form.sort,
            id: "",
          };
          sysexpress(data).then((res) => {
            console.log(res);
            if (res.code == 20000) {
              _self.sysexpresslistFn();
            }
            this.$message({
              message: "操作成功",
              type: "success",
            });
          });

          _self.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // submit() {
    //   let _self = this;
    //   _self.tableData = [];
    //   let data = {
    //     name: _self.form.name,
    //     code: _self.form.code,
    //     disabled: _self.radio,
    //     sort: _self.form.sort,
    //     id: "",
    //   };
    //   sysexpress(data).then((res) => {
    //     console.log(res);
    //     if (res.code == 20000) {
    //       _self.sysexpresslistFn();
    //     }
    //     this.$message({
    //       message: "操作成功",
    //       type: "success",
    //     });
    //   });

    //   _self.dialogVisible = false;
    // },

    //确认关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //表格数据
    sysexpresslistFn() {
      let _self = this;
      _self.tableData = [];
      let data = {
        page: _self.page,
        limit: _self.limit,
      };
      sysexpresslist(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          let { limit, current, total } = res.data;
          _self.page = current;
          _self.limit = limit;
          _self.total = total;
          for (let item of res.data.records) {
            _self.tableData.push({
              name: item.name,
              code: item.code,
              isDisable: item.disabled,
              sort: item.sort,
              id: item.id,
            });
          }
        }
      });
    },
  },
  components: {
    supertable,
  },
};
</script>

<style scoped>
.btnSolt {
  margin: 20px 0;
}
.PhysicalTable {
  margin: 20px;
}
</style>